<!DOCTYPE html>
<html lang="en">
 <head> 
  <meta charset="UTF-8" /> 
  <title>Document</title>
 </head> 
 <link rel="stylesheet" type="text/css" href="css/clothes.css">
 <body>
 <div class="hdimg"></div>
 <div class=" Search">
<input id="searchInput" class="search-input" type="text" placeholder="搜索其他喜欢的衣服">
<button class="search-btn btn">搜索</button>
</div>
  <div class="b1"> 
   <div class="b2"> 
    <img src="images/mc1-1.jpg" id="bigPic" /> 
    <div id="smallPic"> 
     <img src="images/mc1-1.jpg" class="" /> 
     <img src="images/mc1-2.jpg" /> 
     <img src="images/mc1-3.jpg" /> 
     <img src="images/mc1-4.jpg" /> 
     <img src="images/mc1-5.jpg" /> 
    </div> 
   </div> 
   <div class="b3"> 
    <div class="hd"> 
     <h1> 2019年 牛仔外套 </h1> 
     <p class="newp">休闲牛仔上衣 </p> 
    </div> 
    <div> 
     <dl class="dl1"> 
      <dt>
        价格&nbsp;: 
      </dt> 
      <dd> 
       <em>￥</em> 
       <span>299.00</span> 
      </dd> 
     </dl> 
    </div> 
    <div> 
     <dl class="dl1"> 
      <dt>
        运费&nbsp;: 
      </dt> 
      <dd> 
       <div class="dld"> 
        <a>上海&nbsp;&nbsp;-----&nbsp;&nbsp;10元</a> 
       </div> 
      </dd> 
     </dl> 
    </div> 
    <ul> 
     <li> 
      <div class="dl2"> 
       <span>累计评价</span> 
       <span>245</span> 
      </div></li> 
     <li> 
      <div class="dl1"> 
       <a href="##"> 积&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;分 349</a> 
      </div></li> 
    </ul> 
    <div> 
     <div> 
      <div class="dl2"> 
       <dl> 
        <dt>
          尺码&nbsp;: 
        </dt> 
        <dd> 
         <ul data-property="尺码"> 
          <li> <a href="#" role="button" tabindex="0"> <span>170/S</span></a></li> 
          <li> <a href="#" role="button" tabindex="0"> <span>175/M</span></a></li> 
          <li> <a href="#" role="button" tabindex="0"> <span>180/L</span></a></li> 
         </ul> 
        </dd> 
       </dl> 
       <dl> 
        <dt>
          颜色&nbsp;: 
        </dt> 
        <dd> 
         <ul> 
          <li title="靛青色"> <a href="#" center="" no-repeat role="button" tabindex="0"> <span>靛青色</span> </a></li>
         </ul>
         <a href="#" center="" no-repeat role="button" tabindex="0"> </a>
        </dd>
        <a href="#" center="" no-repeat role="button" tabindex="0"> </a>
       </dl>
       <a href="#" center="" no-repeat role="button" tabindex="0"> </a>
       <dl class="tb-amount tm-clear">
        <a> 
         <dt class="tb-metatit">
           数量&nbsp;: 
         </dt> 
         <dd> 
          <span> <input type="text" value="1" maxlength="8" title="请输入购买量" /> <span class="mui-amount-unit">件</span></span> 
         </dd> 
         <div class="sele"> 
          <div class="buy"> 
           <a href="#">立即购买</a> 
          </div> 
          <div class="buycar"> 
           <a href="#">加入购物车</a> 
          </div>
          <br />
          <br />
          <br /> 
          <div class="scj"> 
           <a href="#">添加到收藏夹</a> 
          </div>  
         </div></a>
       </dl>
      </div>
     </div>
    </div>
   </div>
  </div>
 </body>
 <script type="text/javascript">
     var smallPic = document.getElementById("smallPic");
     var imglist = document.getElementsByTagName("img");
     var bigPic = document.getElementById("bigPic");

     for(var i = 0;i<imglist.length;i++){
      imglist[i].onmouseover = function(){
        for( var j = 0;j<imglist.length;j++){
          imglist[j].style.border = "";
        }
        this.style.border = "2px solid black";
        bigPic.src = this.src;
      }
     }
</script>
</html>